<template>
  <div id="acceptanceList">
    <div>
        <Filters block :form="searchForm" :filterData="filterData" @confirm="changePage(1)"></Filters>
    </div>
    <div class="container">
        <DataTable rowKey="orderId" :border="false" :tableData="Data" :showConfig='false' :tableColumn="tableColumn" :pageConfig="pageConfig"></DataTable>
    </div>
  </div>
</template>
<script lang='ts'>
import { Component, Watch, Vue } from 'vue-property-decorator';
@Component
export default class purchase extends Vue {
    searchForm: any = {
        projectId: undefined,
        orderStatus: undefined,
        name: undefined
    }
    showBtn:any[] = [
        {
            label: '筛选',
            callback: '',
            type: ''
        },
        {
            label: '清空',
            callback: '',
            type: 'default'
        }
    ]
    get filterData () {
      return {
        projectId: {
          label: '项目',
          type: 'select',
          width: 200,
          template: {
            placeholder: '请选择项目',
            clearable: true,
            filterable: true,
            options: this.projectList,
            popupScroll: this.popupScroll,
            callback: this.callbackProject,
            search: this.searchProject
          }
        },
        orderStatus: {
          label: '订单状态',
          type: 'select',
          width: 200,
          template: {
            placeholder: '请选择订单状态',
            clearable: true,
            filterable: true,
            options: this.$enums.acceptanceList.orderStatusOptions
          }
        },
        name: {
          label: '订单编号/供应商查询',
          width: 200,
          type: 'input',
          template: {
            placeholder: '请输入订单编号/供应商查询',
            clearable: true
          }
        }
      }
    }
    projectList:any[] = []
    Data: any[] = [];
    tableColumn: any = {
      checkSn: {
          label: '序号',
          width: 60
      },
      orderSn: {
        label: '订单流水号'
      },
      projectName: {
          label: '项目名称'
      },
      vdef3Name: {
          label: '请购部门'
      },
      supplierName: {
          label: '供应商名称'
      },
      cdeptName: {
          label: '采购部门'
      },
      orderStatus: {
          label: '订单状态',
          map: this.$enums.acceptanceList.orderStatus,
          width: 100
      },
      action: {
          label: '操作',
          width: 120,
          template: [
          {
            tag: 'router-link',
            text: '详情',
            query: {
              _alias: 'detail',
              orderId: ''
            },
            show: true,
            path: '/acceptance/purchase/purchaseDetails'
          }
        ]
      }
    };
    currentPage:any = 1;
    shearchVal:any = ''
    pageConfig: any = {

    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  };

  get getSearchForm () {
    return {
      ...this.searchForm
    }
  }

  init () {
    this.getList();
    this.getProjectList()
  }
  changePage (val: number) {
    this.pageConfig.current = val;
    this.getList();
  }
  callbackProject (val:any) {
    this.shearchVal = val
    this.currentPage = 1
    this.projectList = []
    this.getProjectList()
  }
  searchProject (val:any) {
    this.shearchVal = val
    this.currentPage = 1
    this.projectList = []
    this.getProjectList()
  }
  // 滚动选择框时执行
  popupScroll (e:any) {
    const { scrollHeight, scrollTop, clientHeight } = e.target
      if (Math.floor(scrollHeight - scrollTop) === clientHeight) {
        this.currentPage++
        this.getProjectList()
      }
  }
  // 获取项目列表
  getProjectList () {
    let data = {
      page: this.currentPage,
      size: 200,
      searchValue: this.shearchVal
    }
    this.$api.projectRoleProjectListFetch(data).then((res:any) => {
     let projectList = this.projectList.concat(res.data.records.map((item:any) => ({
        label: item.ncProjectName,
        value: item.ncProjectId + '-' + item.ncProjectName
      })))
      this.projectList = projectList
    }).catch()
  }
  getList () {
    let data = {
      ...this.getSearchForm,
      projectId: this.getSearchForm.projectId ? this.getSearchForm.projectId.split('-')[0] : '',
      page: this.pageConfig.current,
      size: this.pageConfig.pageSize
    };
    this.$api.checkOrderCheckOrderListFetch(data).then((res: any) => {
      res.data.records.map((item:any, index:any) => {
        item.checkSn = index + 1
      })
      this.Data = res.data.records;
      this.pageConfig.total = res.data.total;
      if (!this.Data.length && this.pageConfig.current > 1) {
        --this.pageConfig.current;
        this.getList();
      }
    });
  }
}
</script>
<style lang='scss' scoped></style>
